// 全局样式 - 使用 Stylus 嵌套语法

// 基础重置样式
* {
  margin: 0
  padding: 0
  box-sizing: border-box
  //text-shadow: 0.25rem 0.25rem 0.5rem rgb(1, 162, 190)    
}

// 自定义滚动条样式
::-webkit-scrollbar {
  width: 8px
  height: 8px
}

::-webkit-scrollbar-track {
  background: #2a2a2a
  border-radius: 4px
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a
  border-radius: 4px
  transition: background 0.3s
  
  &:hover {
    background: #5a5a5a
  }
}

::-webkit-scrollbar-corner {
  background: #2a2a2a
}

// Firefox 滚动条样式
html {
  scrollbar-width: thin
  scrollbar-color: #4a4a4a #2a2a2a
}

// 移除列表样式
ul, ol {
  list-style: none
}

// 其他样式清除
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block
}

blockquote, q {
  quotes: none
  
  &::before, &::after {
    content: ""
    content: none
  }
}

table {
  border-collapse: collapse
  border-spacing: 0
}

// 基础页面样式
body {
  color: #fff
  background-color: #202020
  position: relative
  min-height: 100vh
  overflow-x: hidden
  font-size: 16px // 基础字体大小
}

// 响应式文字大小
@media (max-width: 768px) {
  body {
    font-size: 14px
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px
  }
}

// 背景容器样式
#background-container {
  pointer-events: none // 确保背景不会拦截鼠标事件
}

// 链接样式
a {
  text-decoration: none
}

// 淡入动画
@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

// 添加从下向上淡入动画
@keyframes fadeInUp {
  from {
    opacity: 0
    transform: translateY(20px)
  }
  to {
    opacity: 1
    transform: translateY(0)
  }
}

// 添加从左向右淡入动画
@keyframes fadeInLeft {
  from {
    opacity: 0
    transform: translateX(-20px)
  }
  to {
    opacity: 1
    transform: translateX(0)
  }
}

// 添加从右向左淡入动画
@keyframes fadeInRight {
  from {
    opacity: 0
    transform: translateX(20px)
  }
  to {
    opacity: 1
    transform: translateX(0)
  }
}

// 基础动画类
.fade-in {
  animation: fadeIn 0.8s ease-in-out forwards
  opacity: 0
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-in-out forwards
  opacity: 0
}

.fade-in-left {
  animation: fadeInLeft 0.8s ease-in-out forwards
  opacity: 0
}

.fade-in-right {
  animation: fadeInRight 0.8s ease-in-out forwards
  opacity: 0
}

// 动画延迟类
.delay-100 { animation-delay: 0.1s }
.delay-200 { animation-delay: 0.2s }
.delay-300 { animation-delay: 0.3s }
.delay-400 { animation-delay: 0.4s }
.delay-500 { animation-delay: 0.5s }
.delay-600 { animation-delay: 0.6s }

// 响应式容器
.container {
  width: 90%
  max-width: 1200px
  margin: 0 auto
  padding: 0 15px
}

// 响应式网格系统
.row {
  display: flex
  flex-wrap: wrap
  margin: 0 -15px
}

.col {
  flex: 1
  padding: 0 15px
}

// 媒体查询断点
@media (max-width: 992px) {
  .row {
    flex-direction: column
  }
  
  .col {
    width: 100%
    margin-bottom: 20px
  }
}

// 移动端触摸优化
@media (max-width: 768px) {
  a, button {
    min-height: 44px // 提供足够大的触摸区域
    min-width: 44px
    display: inline-flex
    align-items: center
    justify-content: center
  }
}

// 主页面包装器
.main-wrapper {
  min-height: 100vh
  display: flex
  flex-direction: column
  position: relative
}